import { reactive, UnwrapRef, toRefs, computed, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { dayjs } from 'element-plus'

/**
 * @param reqAPI 请求的方法
 * @param reqParams 请求额外的参数
 * @returns 表格、分页器数据 和 分页器方法
 */
export const useTable = <P, R extends { list: UnwrapRef<R['list']>; total: number }>(reqAPIList: (params: P, parentId?: number) => RES<R>, reqParams: P, reqAPIUpdateStatus?: any) => {
  const parentId = ref(0)
  // 表格信息 和 分页器参数
  const state = reactive({
    list: [] as R['list'], // 当前页详细数据
    pageNum: 1, // 当前第几页
    pageSize: 10, // 一页多少条数据
    total: 0, // 数据总数
  })
  const { list, pageNum, pageSize, total } = toRefs(state)
  // 更新时间格式
  const newDate = computed(() => {
    return (time: string | undefined) => {
      if (!time) return
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    }
  })
  // 根据用户名或姓名分页获取用户列表 表格数据
  const queryList = async () => {
    let res = await reqAPIList({ ...reqParams, pageNum: pageNum.value, pageSize: pageSize.value }, parentId.value)
    // console.log(res)
    if (res.code === 200) {
      list.value = res.data.list
      total.value = res.data.total
    }
  }
  queryList()
  // 分页器 修改一页多少数据 方法
  const handleSizeChange = () => {
    queryList()
  }
  // 分页器 修改当前页 方法
  const handleCurrentChange = () => {
    queryList()
  }

  // 是否启用 按钮
  const updateStatus = async (id: number, status: number) => {
    if (!reqAPIUpdateStatus) return
    // console.log('新状态的值', row)
    let res = await reqAPIUpdateStatus(id, status)
    // console.log(res)
    if (res.code === 200) {
      ElMessage.success('状态修改成功！')
    } else {
      ElMessage.error('状态修改失败！')
    }
  }
  // 查看下级 按钮
  const lookChild = (id: number) => {
    parentId.value = id
    queryList()
  }
  return {
    list,
    pageNum,
    pageSize,
    total,
    newDate,
    queryList,
    handleSizeChange,
    handleCurrentChange,
    updateStatus,
    lookChild,
  }
}
